<template>
	<view>		
		<swiper class="swiper" :autoplay="true">
			<swiper-item v-for="(item, index) in house.img_url">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>	
		</swiper>
		<view class="detail-container">		
			<view class="title">{{house.community_name}}-{{house.house_layout}}</view>		
			<view class="collection" @click="addCollection">
				<image :src="img_collection" ></image>
				<text :class="{'active':collection_active}">{{collection}}</text>
			</view>
			<view class="sub-title">
				<view class="sub-title-item">
					<text class="key-num">{{house.house_price}}万</text>
					<text class="pre-title">售价</text>					
				</view>
				<view class="sub-title-item">
					<text class="key-num">{{house.house_layout}}</text>
					<text class="pre-title">户型</text>					
				</view>
				<view class="sub-title-item">
					<text class="key-num">{{house.house_price}}㎡</text>
					<text class="pre-title">产权面积</text>					
				</view>				
			</view>
			<view class="detail-group">
				<view class="detail-item">
					<text class='pre-title'>小区名称</text>
					<text>{{house.community_name}}</text>					
				</view>	
				<view class="detail-item">
					<text class='pre-title'>具体位置</text>
					<text>{{house.specific_location}}</text>					
				</view>	
				<view class="detail-item">
					<text class="pre-title">分佣比例</text>
					<text class="pre-title">买</text>
					<text class="key-num trade" style="position: absolute;left: 250rpx;">{{saler_ratio}}%</text>
					<text class="pre-title"  style="position: absolute;left: 420rpx;">卖</text>
					<text class="key-num trade" style="position: absolute;left: 456rpx;">{{seller_ratio}}%</text>
				</view>							
			</view>		
		</view>		
		<view class="detail-container">
			<view class="title">房源信息</view>							
			<view class="detail-group">
				<view class="detail-item">
					<text class='pre-title'>房屋户型</text>
					<text>{{house.house_layout}}</text>	
					<text class='pre-title'>房屋面积</text>
					<text>{{house.house_area}}㎡</text>	
				</view>
				<view class="detail-item">
					<text class='pre-title'>户型结构</text>
					<text>{{house.house_layout_structure}}</text>	
					<text class='pre-title'>房本年限</text>
					<text>{{house.period_of_house}}</text>	
				</view>
				<view class="detail-item">
					<text class='pre-title'>装修情况</text>
					<text>{{house.house_renovation_condition}}</text>	
					<text class='pre-title'>建筑年代</text>
					<text>{{house.age_of_architecture}}年</text>	
				</view>
				<view class="detail-item">
					<text class='pre-title'>房屋楼层</text>
					<text>{{house.house_floor}}</text>	
					<text class='pre-title'>房屋类型</text>
					<text>{{house.type_of_residence}}</text>	
				</view>
				<view class="detail-item">
					<text class='pre-title'>配备电梯</text>
					<text>{{house.is_equipped_with_elevator}}</text>	
					<text class='pre-title'>抵押情况</text>
					<text>{{house.mortgage_condition}}</text>	
				</view>								
			</view>				
		</view>			
		<view class="detail-container">
			<view class="title">房源地图</view>	
			<view class="detail-grid">
				<image src="../../static/u251.jpg" mode="widthFix"></image>
			</view>
		</view>	
		<view class="detail-container">
			<view class="title">卖方经纪人</view>	
			<view class="img-container">
				<view class="">
					<image src="../../static/u256.svg" mode="aspectFit"></image>
					<view style="display: inline-block;">
						<text>{{house.userInfo.user_name}}</text>
						<text>{{house.userInfo.company}}</text>
						<text>{{house.userInfo.phone}}</text>
					</view>
				</view>					
			</view>
		</view>			
	</view>	
</template>
<script>
	import store from '@/store/store.vue'
	export default {
		onLoad(options){
			this.id = options.id
			this.user_id = options.user_id
			this.options = options
		},
		
		onShow(){
			let _this = this
			uni.request({
			    url: store.url + '/house/get_house_info_by_second_house?id=' + _this.id + '&user_id=' + _this.user_id,
				method: 'GET',		
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {						
					console.log(res)
					if(res.data.status == 'success'){												
						let msg = res.data.message
						_this.house = msg						
						let arr = msg.commission_share_ratio.split(';')
						_this.saler_ratio = arr[0]
						_this.seller_ratio = arr[1]
						arr = msg.img_url.split(';')
						arr.pop()
						for(let j = 0; j < arr.length; j++){
							arr[j] = store.url + '/uploads/' + arr[j]
						}
						_this.house.img_url = arr						
						arr = msg.house_layout.split(';')
						_this.house.house_layout = arr[0] + '室' + arr[1] + '厅' + arr[2] + '卫'
						arr = msg.house_floor.split(';')
						_this.house.house_floor = arr[0] + '层 (共' + arr[1] + '层)'
						if(_this.house.house_layout_structure == 1){
							_this.house.house_layout_structure = '平层' 
						}else if(_this.house.house_layout_structure == 2){
							_this.house.house_layout_structure = '复式'
						}else if(_this.house.house_layout_structure == 3){
							_this.house.house_layout_structure = '错层'
						}else{
							_this.house.house_layout_structure = '跃层'
						}
						if(_this.house.type_of_residence == 1){
							_this.house.type_of_residence = '住宅'
						}else{
							_this.house.type_of_residence = '别墅'
						}					
						if(_this.house.house_renovation_condition == 1){
							_this.house.house_renovation_condition = '毛坯'
						}else if(_this.house_renovation_condition == 2){
							_this.house.house_renovation_condition = '普通装修'
						}else{
							_this.house.house_renovation_condition = '精装修'
						}		
						if(_this.house.period_of_house == 1){
							_this.house.period_of_house = '不满2年'
						}else if(_this.house.period_of_house == 2){
							_this.house.period_of_house = '满2年'
						}else{
							_this.house.period_of_house = '满5年'
						}
						if(_this.house.condition_of_mortgage == 1){
							_this.house.condition_of_mortgage = '无抵押'
						}else{
							_this.house.condition_of_mortgage = '有抵押'
						}
						if(_this.house.is_equipped_with_elevator == 1){
							_this.house.is_equipped_with_elevator = '有电梯'
						}else{
							_this.house.is_equipped_with_elevator = '无电梯'
						}
					}else{
						uni.showModal({
							title: '提示',
							content: '错误: ' + res.data.message
						});								
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		},
		data(){
			return {
				options: {},
				house:{},
				saler_ratio:'',
				seller_ratio:'',
				collection: '收藏',
				img_collection: '../../static/collection.png',
				collection_active: false
			}			
		},
		methods:{
			addCollection(){					
				if(getApp().globalData.user_id == 0){
					uni.showModal({
					    title: '提示',
					    content: '请先登录'
					});	
					return
				}
				
				let _this = this					
				uni.request({
				    url: store.url + '/house/add_collection',
					method: 'POST',		
				    header: {
						"content-type": "application/json;charset=utf-8"						
				    },
					data:{
						house_source_id: _this.id,
						user_id: getApp().globalData.user_id,
						house_source_type: 2,
						publisher_id: _this.options.publisher_id,
						inviter_id: _this.options.inviter_id,
						address: _this.house.specific_location,
						house_layout: _this.options.house_layout,
						title: _this.options.title
					},
				    success: (res) => {						
						console.log(res)					
						_this.img_collection = '../../static/collection_after.png'
						_this.collection_active = true
				    },
					fail: (res)=>{
						uni.showModal({
						    title: '提示',
						    content: '访问服务器失败: ' + res.data.message
						});						
					}
				}); 
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.swiper {
		margin: 0 auto 0;
		overflow: hidden;
		width: 100%;
		height: 46vw;
	
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.detail-container{
		margin: 20rpx auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		width: 94vw;
		background: #fff;
		position: relative;
		
		.title{
			font-size: 40rpx;
			font-weight: bold;
			letter-spacing:5rpx
		}			
				
		.collection{
			position: absolute;
			right: 40rpx;
			top: 24rpx;
			font-size: 22rpx;
			color: #676565;
			image{
				height: 45rpx;
				width: 45rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: -2rpx;
				margin-top: 6rpx;
			}			
			.active{
				color: #f13b32;
			}
		}				
		.detail-group{
			margin: 50rpx 0 20rpx 0;
			
			text{
				margin-right: 20rpx;			
				&:first-of-type + text{
					margin-right: 40rpx
				}
			}			
			.text-group{
				width: 50%;
			}
			text.half:first-of-type{
				width:142rpx;
				margin-right:-10rpx!important;
			}					
			
			text.half:first-of-type + text{
				width: 25%;
			}
			
			.trade:first-of-type + text{
				margin-right: 0;
			}
			
			.trade:first-of-type + text + text + text{
				margin-right: 0;
			}
		}			
		
		.sub-title{
			display: flex;
			margin: 10rpx auto;		
			box-sizing: border-box;
			border-radius: 10rpx;
			align-items: center;
			justify-content: space-between;	
			color: #676565;
			font-size: 20rpx;
			
			.sub-title-item{
				text-align: center;
				margin: 0 15rpx;
				text {
					display: block;
				}
			}
			
			.key-num{
				font-size: 40rpx;
				font-weight: bold;
				color: #f13a32;
			}
			
			.pre-title{
				color: #676565;		
			}
		}
		.detail-item {
			display: flex;
			margin: 10rpx auto;		
			box-sizing: border-box;
			border-radius: 10rpx;
			align-items: center;
			justify-content: flex-start;
						
			text{
				min-width:150rpx;
				text-align: left;
			}
			
			.tab-box {
				font-size: 20rpx;
				color: #676565;
						
				text {					
					font-weight: bold;
					margin-right: 15rpx;
					box-sizing: border-box;
					padding: 5rpx 10rpx;
					-webkit-border-radius: 8rpx;
					-moz-border-radius: 8rpx;
					border-radius: 5rpx;
					background: #ededed;		
					color: #676565;
				}
			
				.active {
					color: #46aeec;
					background: #d0e2f6;
				}		
									
				.highlight{
					color: #fff;
					background: #f13a32;
				}					
			}
			
			.pre-title{
				color: #676565;				
			}
			
			.key-num{
				color: #f13a32;
			}
						
			.pdmg:first-of-type{
				letter-spacing: 12rpx;		
				margin-right: 10rpx;
			}
			
			.pdmg:first-of-type + text + text{
				letter-spacing: 12rpx;		
				margin-right: 10rpx;
			}
			
			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
				overflow: hidden;
			}		
		}
	}
	
	.detail-grid{		
		display: flex;
	
		image {
			margin: 0vw;
			flex: 1;
		}		
	}
	.divider{
		background:#bbb;
		height:1px;
		margin-top:60rpx
	}
	.divider-hidden{
		height:1px;
		margin-top:60rpx
	}
	.detail-group.mg0{
		margin-top: 0;		
	}
	.img-container {
		display: flex;
		margin: 0 auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		align-items: center;
		justify-content: space-between;
		width: 90vw;
		background: #fff;
	
		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			overflow: hidden;
			background: #02a0ea;
		}
		
		text{
			display: block;
			margin-left: 20rpx;
		}
		
		text:first-of-type{
			font-size: 40rpx;
			font-weight: bold;
		}
		text:last-of-type{
			color: #676565;
		}
	}
	.show-container{
		display: flex;
		margin: 0 auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		align-items: center;
		justify-content: flex-start;
		width: 90vw;
		background: #fff;
		align-items: flex-start;
		
		.show-item{
			width: 50%;
			margin: 0 20rpx;
			
			image {
				width: 100%;
			}
			
			text{
				display: block;
			}
			
			.pre-title{
				color: #676565;				
			}
			
			.key-num{
				color: #f13a32;
			}
		}
	}	
</style>
